import React, { Component } from "react";
import Child from "./Child";
import Child2 from "./Child2";

// connect是一个函数，它的返回值是一个高阶组件
import { connect } from "react-redux";

// 这个函数的作用是将仓库的state的值映射到组件的props的里面
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// 这个函数的作用就是将仓库的dispatch映射到组件的props的里面
const mapDispatchToProps = (dispatch) => {
  return {
    // props里面已经有一个add方法
    // 调用add方法，就相当于调用了store.dispatch({ type: "add" })
    add() {
      dispatch({ type: "add" });
    },
  };
};

// 组件里面已经不需要引入store了
// import store from "./store";

class App extends Component {
  state = {};

  handleClick = () => {
    // store.dispatch({ type: "add" });
    // console.log(store.getState());
    this.props.add();
  };

  render() {
    console.log(this);
    return (
      <>
        <h2>react结合redux</h2>
        {/* <p>count: {store.getState().count}</p>
        <button onClick={this.handleClick}>+</button> */}
        <p>count: {this.props.count}</p>
        <button onClick={this.handleClick}>+</button>

        <hr />

        <Child />

        <hr />

        <Child2 />
      </>
    );
  }
}

// connect可以接受两个函数作为参数
export default connect(mapStateToProps, mapDispatchToProps)(App);
